const prev = document.getElementById('prev')
const next = document.getElementById('next')
const progress = document.getElementById('progress')
const circles = document.querySelectorAll('.circle')

let idx = 0

next.addEventListener('click', () => {
    idx++
    prev.disabled = false
    if(idx > circles.length - 1){
        idx = circles.length
    }
    if(idx === circles.length - 1) next.disabled = true
    circles[idx].classList.toggle('active')
    progress.style.width = `${idx * 33}%`
})
prev.addEventListener('click', () => {
    idx--
    next.disabled = false
    if(idx < 0){
        idx = 0
    }
    if(idx === 0) prev.disabled = true
    progress.style.width = `${idx * 33}%`
    circles[idx + 1].classList.toggle('active')
})